﻿
@{
    Layout = null;
    ViewData["Title"] = "Live";
}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/zjego/assets/bootstrap.min.css">
    <style>
        .bg-f2 {
            background-color: #f8f9fa;
        }

        video {
            width: 320px;
            height: auto;
        }

        .videoRow {
            margin-top: 30px;
        }

        #previewLabel {
            display: block;
            position: absolute;
        }
    </style>
    <title>连麦功能</title>
</head>

<body class="bg-f2">

    <div class="container">

        <div class="my-3 p-3 bg-white rounded box-shadow small">

            <h6 class="border-bottom border-gray pb-2 mb-0">连麦</h6>

            <div class="row" style="margin-top:1%">

                <div class="col-sm">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="audioList"><strong class="text-gray-dark">音频设备</strong></label>
                        </div>
                        <select class="custom-select" id="audioList" style="width: 60%">
                        </select>
                    </div>
                </div>

                <div class="col-sm">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="videoList"><strong class="text-gray-dark">视频设备</strong></label>
                        </div>
                        <select class="custom-select" id="videoList" style="width: 60%">
                        </select>
                    </div>
                </div>

                <div class="col-sm">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="roomId"><strong class="text-gray-dark">房间号</strong></label>
                        </div>
                        <input type="email" class="form-control d-inline" id="roomId" style="width: 60%" aria-describedby="emailHelp"
                               placeholder="请输入房间号">
                    </div>
                </div>

                <div class="col-sm">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="memberList"><strong class="text-gray-dark">房间人员</strong></label>
                        </div>
                        <select class="custom-select" id="memberList" style="width: 60%">
                        </select>
                    </div>
                </div>


            </div>

            <div class="row">

                <div class="col-sm">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="videoList"><strong class="text-gray-dark">推流质量</strong></label>
                        </div>
                        <select class="custom-select" id="videoQuality" style="width: 70%">
                            <option value="1">标清</option>
                            <option value="2">高清</option>
                            <option value="3">超清</option>
                        </select>
                    </div>
                </div>

                <div class="col-sm">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="videoList"><strong class="text-gray-dark">最大拉流数</strong></label>
                        </div>
                        <input type="email" class="form-control d-inline" id="maxPullNamber" style="width: 75%" value="7"
                               aria-describedby="emailHelp" placeholder="最大拉流数默认为4">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm">
                    <button type="button" id="createRoom" class="btn btn-primary btn-sm">创建房间(作为主播)</button>
                    <button type="button" id="openRoom" class="btn btn-primary btn-sm">进入房间(作为观众)</button>
                    <button type="button" id="leaveRoom" class="btn btn-secondary btn-sm">退出</button>
                    <button type="button" id="endJoinLive" class="btn btn-primary btn-sm">结束连麦(作为主播)</button>
                    <button type="button" id="endLive" class="btn btn-primary btn-sm">结束连麦(作为观众)</button>
                    <button type="button" id="requestJoinLive" class="btn btn-primary btn-sm">请求连麦(作为观众)</button>
                    <button type="button" id="inviteJoinLive" class="btn btn-primary btn-sm">邀请连麦(作为主播)</button>
                </div>
            </div>

            <div class="row videoRow">
                <div class="col-sm">
                    <label id="previewLabel" class="text-white"></label>
                    <video id="previewVideo" autoplay muted playsinline></video>
                </div>
                <div class="col-sm remoteVideo">
                    <!-- <video  autoplay muted playsinline></video> -->
                </div>
            </div>

            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="liveConfirm" style="display:none">
                连麦弹窗
            </button>

            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <strong class="text-gray-dark" id="exampleModalLabel">收到连麦请求</strong>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm" id="liveRefuse" data-dismiss="modal">拒绝连麦</button>
                            <button type="button" class="btn btn-primary btn-sm" id="liveAgree" data-dismiss="modal">同意连麦</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
<script>
    // init vConsole
    var vConsole = new VConsole();
    console.log('Hello world');
</script>
<script src="/zjego/assets/jquery-3.3.1.min.js"></script>
<script src="/zjego/assets/popper.min.js"></script>
<script src="/zjego/assets/bootstrap.min.js"></script>
<!-- zego js sdk -->
<script src="/zjego/assets/jZego-rtc.js"></script>
<script src="/zjego/common.js?v=014"></script>
<script>
    var role = null  //角色
//覆盖index.js 中的init
function init() {
  zg = new ZegoClient();
  zg.setUserStateUpdate(true);//重要  启动用户变化监听

  //内调测试用代码，客户请忽略  start
  setConfig(zg);
  //内调测试用代码，客户请忽略  end


  zg.config(_config);
  enumDevices();

  // 监听sdk回掉
  listen();
}

function respondJoinLive(flag, requestId, fromUserId) {
  var accept = flag;
  window._fromUserId = fromUserId;
  zg.respondJoinLive(requestId, accept, function (seq) {
    console.log('respondJoinLive success', seq);
  }, function (err, seq) {
    console.log('respondJoinLive err', err, seq);
  })
}

function listenChild() {
  var listens = {
    onGetAnchorInfo: function (userid, username) {
      anchor_userid = userid, anchro_username = username;
    },

    onRecvJoinLiveRequest: function (requestId, from_userid, from_username, roomid) {
      console.log('onRecvJoinLiveRequest', requestId, from_userid, from_username, roomid);
      $('#exampleModalLabel').text("收到id为" + requestId + "的连麦请求")
      $('#liveConfirm').click();
      $('#liveAgree').on('click', function () {
        respondJoinLive(true, requestId, from_userid)
      })
      $('#liveRefuse').on('click', function () {
        respondJoinLive(false, requestId, from_userid)
      })
    },

    onRecvInviteJoinLiveRequest: function (requestId, from_userid, from_username, roomid) {
      console.log('onRecvInviteJoinLiveRequest', requestId, from_userid, from_username, roomid);
      $('#exampleModalLabel').text("收到id为" + requestId + "的连麦请求")
      $('#liveConfirm').click();
      $('#liveAgree').on('click', function () {
        doPreviewPublish()
      })
    },

    onRecvEndJoinLiveCommand: function (requestId, from_userid, from_username, roomid) {
      console.log('onRecvEndJoinLiveCommand', requestId, from_userid, from_username, roomid);
      isPreviewed && zg.stopPreview(previewVideo);
      isPreviewed && zg.stopPublishingStream(_config.idName);
    },
    onUserStateUpdate: function (roomId, userList) {
      console.log('onUserStateUpdate', roomId, userList);
      userList.forEach(function (item) {
        if (item.action === 1) {
          $userList.push(item);
        } else if (item.action === 2) {
          $userList.forEach(function (item2, index) {
            if (item.idName === item2.idName) {
              $userList.splice(index, 1)
            }
          })
        }


      })
      $('#memberList').html('');
      $userList.forEach(function (item) {
        item.idName !== window._config.idName && $('#memberList').append('<option value="' + item.idName + '">' + item.nickName + '</option>');
      });
    },
    onGetTotalUserList: function (roomId, userList) {
      $userList = userList;
      $('#memberList').html('');
      $userList.forEach(function (item) {
        item.idName !== window._config.idName && $('#memberList').append('<option value="' + item.idName + '">' + item.nickName + '</option>');
      });
      console.log('onGetTotalUserList', roomId, userList);
    }
  };
  for (var key in listens) {
    zg[key] = listens[key]
  }
}

function loginSuccess(streamList, type) {

  let role = zg.stateCenter.role

  if (role == 1) {
    $('#endLive')[0].disabled = true
    $('#requestJoinLive')[0].disabled = true
  } else if (role == 2) {
    $('#endJoinLive')[0].disabled = true
    $('#inviteJoinLive')[0].disabled = true
  }


  var maxNumber = ($('#maxPullNamber') && $('#maxPullNamber').val()) || 4

  //限制房间最多人数，原因：视频软解码消耗cpu，浏览器之间能支撑的个数会有差异，太多会卡顿
  if (streamList.length >= maxNumber) {
    alert('房间太拥挤，换一个吧！');
    leaveRoom();
    return;
  }
  if ($('#streamID').val()) {
    useLocalStreamList = [{
      anchor_id_name: 'custom',
      stream_id: $('#streamID').val(),
      anchor_nick_name: 'custom'
    }, ...streamList];
  } else {
    useLocalStreamList = streamList;
  }


  $('.remoteVideo').html('');
  $('#memberList').html('');
  for (var index = 0; index < useLocalStreamList.length; index++) {
    $('.remoteVideo').append($('<video  autoplay muted playsinline controls></video>'));
    $('#memberList').append('<option value="' + useLocalStreamList[index].anchor_id_name + '">' + useLocalStreamList[index].anchor_nick_name + '</option>');
    play(useLocalStreamList[index].stream_id, $('.remoteVideo video:eq(' + index + ')')[0]);
  }
  console.log(`login success`);

  loginRoom = true;


  //开始预览本地视频
  type === 1 && doPreviewPublish();

}

function leaveRoom() {
  console.info('leave room  and close stream');

  if (isPreviewed) {
    zg.stopPreview(previewVideo);
    zg.stopPublishingStream(_config.idName);
    isPreviewed = false;
  }

  for (var i = 0; i < useLocalStreamList.length; i++) {
    zg.stopPlayingStream(useLocalStreamList[i].stream_id);
  }

  $('#endLive')[0].disabled = false
  $('#requestJoinLive')[0].disabled = false
  $('#endJoinLive')[0].disabled = false
  $('#inviteJoinLive')[0].disabled = false

  useLocalStreamList = [];
  $('.remoteVideo').html('');
  zg.logout();

  role = null
}


$(function () {
  $('#requestJoinLive').click(function () {
    anchor_userid && zg.requestJoinLive(anchor_userid, function (seq) {
      console.log('requestJoinLive suc', seq);
    }, function (err, seq) {
      console.log('requestJoinLive err', err, seq);
    }, function (result, fromUserId, fromUserName) {
      window._fromUserId = fromUserId;
      // alert(result ? '同意连麦' : '拒绝连麦');
      $('#exampleModalLabel').text("收到id为" + fromUserName + "的连麦请求")
      $('#liveConfirm').click();
      $('#liveAgree').on('click', function () {
        doPreviewPublish()
        console.log('requestJoinLive callback', result, fromUserId, fromUserName);
      })
    })
  });

  $('#endLive').click(function () {
    isPreviewed && zg.stopPreview(previewVideo);
    isPreviewed && zg.stopPublishingStream(_config.idName);
  });


  $('#endJoinLive').click(function () {
    window._fromUserId && zg.endJoinLive(window._fromUserId, function (seq) {
      console.log('requestJoinLive suc', seq);
    }, function (err, seq) {
      console.log('requestJoinLive err', err, seq);
    });
    zg.stopPlayingStream(window._fromUserId);
    $('.remoteVideo').html('');
  })

  $('#inviteJoinLive').click(function () {
    $('#memberList').val() && zg.inviteJoinLive($('#memberList').val(), function (seq) {
      window._fromUserId = $('#memberList').val();
      console.log('inviteJoinLive suc', seq);
    }, function (err, seq) {
      console.log('inviteJoinLive err', err, seq);
    }, function (result, fromUserId, fromUserName) {
      alert('同意连麦');
      doPreviewPublish();
      console.log('inviteJoinLive callback', result, fromUserId, fromUserName);
    })
  })

});

</script>

</html>
